
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Bootstrap E-Commerce Template- ACME Shop mini</title>
    <!-- Bootstrap core CSS -->
     <link rel="stylesheet" href="/css/bootstrap.min.css"/>
     <script src="/js/jquery.min.js" ></script>
     <script src="/js/bootstrap.min.js"></script>

    <!-- Fontawesome core CSS -->
    <link href='/css/font-awesome.min.css'   rel='stylesheet'/>
    <!--GOOGLE FONT -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
      <!-- custom CSS here -->
    <link href='/css/style.css'   rel='stylesheet'/>

    <script src='/js/angular.js'  ></script>
	<script src='/js/angular-route.js'  ></script>
    <script src='/js/angular-cookies.min.js'  ></script>

    <script src='/js/app.js' ></script>
    <script src='/js/controller/admin_controller.js' ></script>
    <script src='/js/service/order_service.js' ></script>
    <script src='/js/service/user_service.js' ></script>
</head>
<body ng-app="ecomAdminApp">
 <div  ng-controller="AdminController  as adminCtrl" data-ng-init="init()"  >
    <nav class="navbar navbar-custom" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#productSearch"><strong>ACME </strong> Shipping & Delivery portal</a>
            </div>
        </div>
        <!-- /.container-fluid -->
    </nav>
  <div class="well well-lg" ng-hide="isAdminLogin">
	<form class="form-horizontal">
	<span ng-hide="validuser" style="color: red">Invalid credentials .Please use valid one </span>
		<div class="form-group">
			<label class="control-label col-sm-2" for="email">User name:</label>
			<div class="col-sm-10">
							<input type="text" class="form-control" id="username"
								ng-model="userCredentialDTO.userName" placeholder="Enter username">
						</div>
		</div>
		<div class="form-group">
			<label class="control-label col-sm-2" for="pwd">Password:</label>
			<div class="col-sm-10">
				<input type="password" class="form-control" id="pwd"
					placeholder="Enter password" ng-model="userCredentialDTO.password">
			</div>
		</div>

		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
				<button type="submit" class="btn btn-default" ng-click="adminCtrl.doLogin()">Submit</button>
			</div>
		</div>
	</form>
</div>
    <div class="container" ng-show="isAdminLogin" >
    	<a class="btn btn-warning" role="button" ng-click="adminCtrl.refresh()" >Refresh</a>
    	<div class="col-sm-8">
			<ul class="nav nav-pills">
				<li class="active"><a data-toggle="pill" href="#shipPanel"><Strong>To Ship</Strong></a></li>
				<li><a data-toggle="pill" href="#deliverPanel"><Strong>To Deliver</Strong></a></li>
			</ul>
		</div>
		<div class="tab-content">
				<div id="shipPanel" class="tab-pane fade in active">
					<div class="panel panel-info">
						<div class="panel-body">
							<table class="table table-striped table table-sm">
								<thead>
									<tr>
										<th>Order Id</th>
										<th>User Id</th>
										<th></th>

									</tr>
								</thead>
								<tbody>
									<tr ng-repeat="order in shippingOrder">
										<td>{{order.orderId}}</td>
										<td>{{order.userId}}</td>
										<td><a class="btn btn-warning" role="button" ng-click="adminCtrl.shipOrder(order)" ng-disabled="order.disabled">Shipped</a></td>
									</tr>
								</tbody>

							</table>

						</div>
					</div>

				</div>

				<div id="deliverPanel" class="tab-pane fade">
					<div class="panel panel-info">
						<div class="panel-body">
							<table class="table table-striped table table-sm">
								<thead>
									<tr>
										<th>Order Id</th>
										<th>User Id</th>
										<th></th>

									</tr>
								</thead>
								<tbody>
									<tr ng-repeat="order in deliveringOrder">
										<td>{{order.orderId}}</td>
										<td>{{order.userId}}</td>
										<td>
										  <a class="btn btn-warning" role="button" ng-click="adminCtrl.deliverOrder(order,true)" ng-disabled="order.disabled">Delivered</a>
										  <a class="btn btn-warning" role="button" ng-click="adminCtrl.deliverOrder(order,false)" ng-disabled="order.disabled">Delivery failed</a>
										</td>
									</tr>
								</tbody>

							</table>

						</div>
					</div>

				</div>
    	</div>
    </div>
    <!--Footer -->
    <div class="col-md-12 end-box  footer navbar-fixed-bottom">
        &copy; 2014 | &nbsp; All Rights Reserved | &nbsp; www.acme.com | &nbsp; 24x7 support | &nbsp; Email us: info@acme.com
    </div>
    <!-- /.col -->
    <!--Footer end -->

</div>
</body>
</html>